<template>
    <div class="home">
<!-- tab 标签 -->
      <van-tabs >
        <van-tab
        v-for="category in categories"
        :key="category.id"
        :title="category.name"
        ></van-tab>
      </van-tabs>
<!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        :height="150"
        indicator-color="white">
        <van-swipe-item
        v-for="(banner) in banners"
        :key="banner.id">
          <img v-lazy="banner.imageUrl" :style="{width: '100%', height: '100%'}"/>
        </van-swipe-item>
      </van-swipe>
<!-- 分割线 -->
      <van-divider
        :style="{
          color: '#1989fa',
          borderColor: '#fdde4a',
          padding: '0 16px' }"
        >小编精选，全场特惠 (ง •̀_•́)ง</van-divider>
<!-- 推荐商品项 -->
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          class="prod-list"
      >
      <div
            v-for="item in items"
            :key="item.id" class="prod-item">
            <div v-if="item.type === 2">
              <img v-lazy="item.image">
            </div>
            <div v-else>
              <img v-lazy="item.image">
              <div class="prod-item-bottom">
                <div>{{item.title}}</div>
                <div>{{item.price | money}}</div>
                <div>
                  <van-button
                  type="primary"
                  size="normal"
                  color="#fa585a"
                  round>加入购物车</van-button>
                </div>
              </div>
            </div>
      </div>
      </van-list>
    </div>
</template>

<script>
// import request from '@/utils/require'
import { getHomePageData, getCategories, getMore } from '@/api/home'
export default {
  name: 'Home',
  data () {
    return {
      categories: [], // 切换标签
      banners: [], // banner图
      items: [], // list 列表
      list: [],
      loading: true, // 是否正在加载数据
      finished: false, // 数据是否全全部加载完毕
      nextIndex: 0 // 下一次数据查询时的起始索引
    }
  },
  created () {
    getCategories()
      .then(res => {
        console.log('切换栏:', res.list)
        this.categories = res.list
      })
      // 获取首页数据
    getHomePageData()
      .then(res => {
        console.log('首页数据:', res)
        // 更新 banner的数据
        this.banners = res.banners
        this.items = res.items.list
        this.nextIndex = res.items.nextIndex
        this.finished = res.items.isEnd
        this.loading = false
      })
  },
  methods: {
    /**
          * 加载更多商品
           */
    onLoad () {
      getMore(this.nextIndex)
        .then(res => {
          console.log('更多：', res)
          this.nextIndex = res.nextIndex
          this.items = [...this.items, ...res.list]
          this.finished = res.isEnd
          this.loading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
  .prod-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .prod-item {
      width: 48%;
      margin: 10px 0;
        img {
        width: 100%;
      }
      .prod-item-bottom{
          padding: 15px;
          font-size: 20px;
          color: #fa585a;
          :first-child{
          font-size: 12px;
          color: #877a73;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          }
          .van-button__text{
            color: #fff;
            font-size: 20px;
          }
        }
    }
  }
</style>
